import { CopyOutlined, LeftOutlined, QrcodeOutlined } from "@ant-design/icons";
import {
  Button,
  Input,
  InputRef,
  message,
  Popover,
  QRCode,
  Space,
  Tooltip,
  Typography,
} from "antd";
import React, { useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import styles from "./StatHeader.module.scss";
import useEditQuestion from "../../../hooks/useEditQuestion";
import { MANAGE_LIST_PATHNAME } from "../../../router";

const StatHeader: React.FC = () => {
  const nav = useNavigate();
  const { title } = useGetPageInfo();
  const { id = "" } = useParams();
  const urlInputRef = useRef<InputRef>(null);
  const { editQuestion } = useEditQuestion();

  function handleCopy() {
    const url = `${process.env.REACT_APP_CLIENT_URL}/question/${id}`;
    const text = `${url} ?${title}`;

    if (navigator.clipboard) {
      // 使用现代浏览器的剪贴板API
      navigator.clipboard
        .writeText(text)
        .then(() => {
          message.success("拷贝成功");
        })
        .catch(() => {
          message.error("拷贝失败");
        });
    } else {
      // 降级处理：使用传统方法
      const elem = urlInputRef.current;
      if (!elem) return;
      elem.select();
      document.execCommand("copy");
      message.success("拷贝成功");
    }
  }

  function genLinkAndQRCodeElem() {
    const url = `${process.env.REACT_APP_CLIENT_URL}/question/${id}`;

    return (
      <Space>
        <Input
          defaultValue={url}
          style={{ width: "300px" }}
          ref={urlInputRef}
        />
        <Tooltip title="拷贝">
          <Button icon={<CopyOutlined onClick={handleCopy} />}></Button>
        </Tooltip>
        <Popover
          content={
            <>
              <QRCode
                errorLevel="H"
                value={url}
                icon=""
              />
              <Typography.Title
                level={5}
                style={{
                  width: "160px",
                  wordWrap: "break-word",
                  textAlign: "center",
                }}
              >
                {title}
              </Typography.Title>
            </>
          }
        >
          <Button icon={<QrcodeOutlined />}></Button>
        </Popover>
      </Space>
    );
  }

  return (
    <div className={styles["header-wrapper"]}>
      <div className={styles.header}>
        <div className={styles.left}>
          <Space>
            <Button
              type="link"
              icon={<LeftOutlined />}
              onClick={() => nav(MANAGE_LIST_PATHNAME)}
            >
              返回
            </Button>
            <Typography.Title>{title}</Typography.Title>
          </Space>
        </div>
        <div className={styles.main}>{genLinkAndQRCodeElem()}</div>
        <div className={styles.right}>
          <Space>
            <Button type="primary" onClick={() => editQuestion(id)}>
              编辑问卷
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default StatHeader;
